<template>
  <div style="border: 1px solid red">
    <h2>父组件</h2>
    v-model实现双向绑定<input v-model="msg" type="text"><br>
    value属性+input事件实现双向绑定<input id="" :value="msg" type="text" name="" @input="handelTemp">
    <!-- v-model 相当于给value属性与input事件绑定的一层包装 -->
    <child-com v-model="msg" />
    <!-- .sync修饰符实现双向绑定 -->
    <!-- .sync与v-model区别是
      - 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
      - 区别点：
      - 语法不同: v-model="num", :num.sync="num"
      - v-model：    @input + value
      - :num.sync:    @update:num
      - 一个表单或组件标签内v-model只能用一次；.sync可以有多个。 -->
    <child-com :aaa.sync="n1" :bbb.sync="n2" />
    <child-com :obj="obj" />
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'
export default {
  components: {
    ChildCom
  },
  props: {
  },
  data() {
    return {
      msg: '123',
      n1: 10,
      n2: 20,
      // newMsg: '嗨害嗨'
      obj: {
        name: '朱志文',
        age: 2
      }
    }
  },
  methods: {
    handelTemp(e) {
      this.msg = e.target.value
    }
  }
}
</script>
